import React, { memo, useCallback } from 'react';
import { RoomsWrapper } from './style';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import RoomItem from 'src/compoments/room-item';
import { useNavigate } from 'react-router-dom';
import { changeDetailInfoAction } from 'src/store/modules/detail';

const EntireRooms = memo(() => {
  const roomList = useSelector((state) => state.entire.roomList, shallowEqual);
  const totalCount = useSelector((state) => state.entire.totalCount, shallowEqual);
  const isLoading = useSelector((state) => state.entire.isLoading, shallowEqual);

  const navigate = useNavigate();
  const dispatch = useDispatch()
  const itemClickHandle = useCallback((item) => {
    // console.log('itemClick', item);
    dispatch(changeDetailInfoAction(item))
    navigate('/detail');
  }, [navigate,dispatch]);

  return (
    <RoomsWrapper>
      <h2 className="title">共{totalCount}处住所</h2>
      <div className="list">
        {roomList.map((item) => {
          return <RoomItem key={item._id} itemData={item} itemWidth="20%" itemClick={itemClickHandle} />;
        })}
      </div>
      {isLoading && <div className="cover"></div>}
    </RoomsWrapper>
  );
});

export default EntireRooms;
